<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset=utf-8"utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>关于我</title>
    <meta name="description" content="欢迎来到我的个人站~">
    <meta name="author" content="lygoup@163.com">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="关于我">
    <meta name="twitter:description" content="欢迎来到我的个人站~">
    <meta property="og:type" content="article">
    <meta property="og:title" content="关于我">
    <meta property="og:description" content="欢迎来到我的个人站~">

    <link rel="icon" type="image/png" th:href="@{/images/favorite.png}" sizes="16×16"/>
    <link th:href="@{/images/favorite.png}" rel="shortcut icon" type="image/png">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
    <!--页面等比例缩放90%-->
    <style>
        body {
            /*zoom: 90%;*/
        }
    </style>
    <!--纯白/护眼begin-->
    <style type="text/css">
        .contentBoxS {
            /*border: 1px solid #E3E3E3;*/
            width: 64px;
            border-radius: 30px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -o-user-select: none;
            user-select: none;
            font-size: 10px;

        }

        .btnBoxS {
            width: 64px;
            height: 28px;
            border-radius: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            background-color: grey;
            position: relative;
            cursor: pointer;
            display: flex;
            justify-items: center;
            align-items: center;
        }

        #btn {
            width: 21px;
            height: 21px;
            left: 3px;
            border: 1px solid #E3E3E3;
            border-radius: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            background-color: #fff;
            position: absolute;
        }

        .off {
            display: inline-block;
            text-align: left;
            padding-left: 32px;
        }

        .on {
            display: none;
            text-align: left;
            padding-left: 8px;
        }

        .changeColorTurn {
            animation: colorTurn 300ms ease forwards;
        }

        @keyframes colorTurn {
            from {
                background-color: grey;
            }

            to {
                background-color: #409EFF;
            }
        }

        .changeColorOn {
            animation: colorOn 300ms ease forwards;
        }

        @keyframes colorOn {
            from {
                background-color: #409EFF;
            }

            to {
                background-color: rgb(185, 211, 238);
            }
        }
    </style>
    <!--纯白/护眼end-->
</head>
<body >
<span class="mobile btn-mobile-menu">
    <div class="nav_container">
      <nav class="nav-menu-item" style="float:right">
        <i class="nav-menu-item">
          <a th:href="@{/index}" title="前往 柳勇 的主页" class="blog-button"> 博客主页</a>
        </i>
        <i class="nav-menu-item">
          <a th:href="@{/allArticle}" title="archive" class="btn-mobile-menu__icon">所有文章</a>
        </i>
        <i class="nav-menu-item">
          <a th:href="@{/label}" title="tags" class="btn-mobile-menu__icon">标签</a>
        </i>
        <i class="nav-menu-item">
          <a th:href="@{/TechSupport}" title="support" class="btn-mobile-menu__icon">技术支持</a>
        </i>
        <i class="nav-menu-item">
          <a th:href="@{aboutme}" title="about" class="btn-mobile-menu__icon">关于我</a>
        </i>
      </nav>
    </div>
  </span>
<header class="panel-cover panel-cover--collapsed" style="background-image: url('../images/background-cover.jpg')">
    <div class="panel-main">
        <div class="panel-main__inner panel-inverted">
            <div class="panel-main__content">
                <!-- 头像效果-start -->
                <div class="ih-item circle effect right_to_left">
                    <a title="前往 柳勇 的主页"
                       class="blog-button">
                        <div class="img"><img th:src="@{/images/avatar.jpg}" alt="img"></div>
                        <div class="info">
                            <div class="info-back">
                                <h2>
                                    <p>lygoup@163.com</p>
                                </h2>
                                <p>Base on Java</p>
                            </div>
                        </div>
                    </a>
                </div>
                <!-- 头像效果-end -->
                <h1 class="panel-cover__title panel-title">
                    <a th:href="@{/index}" title="link to homepage for 柳勇" class="blog-button">柳勇</a>
                </h1>
                <p class="panel-cover__subtitle panel-subtitle" style="text-align: center;
    padding-left: 0;">个人站</p>
                <hr class="panel-cover__divider"/>
                <p class="panel-cover__description" style="color: white">博观而约取，厚积而薄发</p>
                <hr class="panel-cover__divider panel-cover__divider--secondary"/>
                <div class="navigation-wrapper">
                    <div>
                        <nav class="cover-navigation cover-navigation--primary">
                            <ul class="navigation">
                                <li class="navigation__item"><a th:href="@{/index}" class="blog-button">博客主页</a></li>
                                <li class="navigation__item"><a th:href="@{/allArticle}" title="archive">所有文章</a></li>
                                <li class="navigation__item"><a th:href="@{/label}" title="tags">标签</a></li>
                                <li class="navigation__item"><a th:href="@{/TechSupport}" title="support">技术支持</a></li>
                                <li class="navigation__item"><a th:href="@{/aboutme}" title="about">关于我</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-cover--overlay cover-clear"></div>
</header>
<div class="content-wrapper" style="background-image: url('../images/aboutme_bg.png');background-repeat: no-repeat;
    background-size: auto;background-position-x: 90%;background-position-Y: 40%;">
    <div class="content-wrapper__inner">
        <article class="post-container post-container--single">
            <header class="post-header">
                <div class="post-meta">
                    <time datetime="" itemprop="datePublished" class="post-meta__date date"></time>
                    <span class="post-meta__tags tags"></span>
                </div>
                <h1 class="post-title">关于我</h1>
            </header>
            <section class="post">
                <div class="containerS" style="margin-left: 60%; position: absolute">
                    <div class="contentBoxS">
                        <div class="btnBoxS">
                            <div id="btn" isopen="off"></div>
                            <span class="on" style="font-family: 'Helvetica Neue'">纯白</span>
                            <span class="off">护眼</span>
                        </div>
                    </div>
                </div>
                <p>大四学生一枚~</p>
<!--                <p>喜欢编程，尤其热爱Java语言，本站后台即为Java开发。</p>-->
                <p>除博客功能本身外，一同开发的还有博客后台管理、数据库监控等功能。</p>
                <p>感谢我的朋友<code class="highlighter-rouge">brave_Y & leopardpan</code>为本站开发提供帮助。</p>
                <h2> 我们的博客 </h2>
                <p>博客系统源码已开源：<a target="_blank" href="https://gitee.com/letme5/blog">Gitee</a></p>
<!--                <p>如果你想搭建一个跟我一样的博客，可以看我的-->
<!--                    <a target="_blank" href="https://blog.csdn.net/weixin_44773580"> CSDN 搭建个人博客 </a>待编写完成，会第一时间上传完整教程。-->
<!--                </p>-->
                <p>有关于博客主题的建议和意见都可以提给我，让我们一起来打造一个精美的主题吧~</p>
<!--                <p>博客源码在 <a target="_blank" href="https://blog.csdn.net/weixin_44773580">Github</a> 上，你的 Star-->
<!--                    是我更新的动力，谢谢~</p>-->
                <p>博客源码在 <a target="_blank" href="https://gitee.com/letme5/blog">Gitee</a> 上，你的 Star
                    是我更新的动力，谢谢~</p>
                <h3> 搭建博客遇到了问题解法方法 </h3>
                <p>查看 <a th:href="@{/TechSupport}">技术支持</a> 需求帮助</p>
                <p>博客模板会一直持续更新，请持续关注我，谢谢~</p>
                <p>联系方式:
                <p style="color: #00688B">QQ&emsp;&nbsp;:&emsp;931936469 <br>邮箱&emsp;:&emsp;lygoup@163.com</p>
                <section class="post-comments">
                    <div id="disqus_thread"></div>
                </section>
            </section>
        </article>
        <section class="footer">
            <footer>
                <div class="footer_div">
                    <nav class="cover-navigation navigation--social">
                        <ul class="navigation">
                            <!-- Email -->
                            <li class="navigation__item_social">
                                <a href="mailto:lygoup@163.com" title="Contact me">
                                    <img th:src="@{/images/email.png}" style="width: 30px" height="30px" alt="email">
                                    <!--<div class="footer-social-icon" style="background:url('../images/email.png');width: 30px;height: 30px"></div>-->
                                </a>
                            </li>
                            <!-- CSDN -->
                            <li class="navigation__item_social">
                                <a href="https://blog.csdn.net/weixin_44773580" title="csdn">
                                    <img th:src="@{/images/csdn.png}" style="width: 30px" height="30px" alt="email">
                                    <!--<div class="footer-social-icon" style="background:url('../images/email.png');width: 30px;height: 30px"></div>-->
                                </a>
                            </li>
                            <!-- GitHub -->
                            <li class="navigation__item_social">
                                <a href="https://gitee.com/letme5/blog" title="gitee">
                                    <img th:src="@{/images/github.png}" style="width: 30px" height="30px" alt="email">
                                    <!--<div class="footer-social-icon" style="background:url('../images/email.png');width: 30px;height: 30px"></div>-->
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="footer_div">
                    <p style="font-size: 12px; color: rgb(179,179,179)" class="copyright text-muted">
                        Copyright &copy; LiuYong 2021 | Theme by <a href="mailto:lygoup@163.com">lygoup@163.com</a>
                    </p>
                    <div align="right">
                        <link rel="stylesheet" th:href="@{/css/font-awesome.min-1.css}">
                        <!-- 访问统计 -->
                        <span id="busuanzi_container_site_pv">
                            <p style="font-size: 12px;color: rgb(179,179,179);display: inline-block">本站总访问量</p>
                            <p style="font-size: 12px;color: rgb(179,179,179); display:inline-block; padding-left: 0px"
                               th:text="${accessNum}"></p><p
                                style="font-size: 12px;color: rgb(179,179,179); display:inline-block; padding-left: 0px">次</p>
                        </span>
                    </div>
                </div>
            </footer>
        </section>
    </div>
</div>

<script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/main.js}"></script>
<script type="text/javascript" th:src="@{/js/highlight.pack.js}"></script>
<!--<script>hljs.initHighlightingOnLoad();</script>-->

<!--纯白/护眼begin-->
<script>
    function isNullOrEmpty(value) {
        return !!((value === null || value === '' || value === undefined));
    }
    let store;
    $(function () {
        let store = {
            // 首次加载，按钮为关闭状态
            flag: false,
            // 开启按钮
            bodyColorOn: 'white', // 全局字体颜色
            bodyBackgroundColorOn: 'rgb(51,51,51)', // 全局背景色
            h1ColorOn: "white", // h1标签字体颜色
            spanColorOn: "white", // span标签字体颜色
            divColorOn: "white", // div标签字体颜色
            buttonColorOn: "white", // button标签字体颜色
            h3ColorOn: "white", // h3标签字体颜色
            h3BackgroundOn: "rgb(49,53,55)", // h3标签背景颜色
            textareaColorOn: "white", // textarea标签字体颜色
            textareaBackgroundOn: "white", // textarea标签背景颜色
            addColorOn: 'white',
            // 关闭按钮
            bodyColorOff: 'black', // 全局字体颜色
            bodyBackgroundColorOff: 'white', // 全局背景色
            h1ColorOff: "black", // h1标签字体颜色
            spanColorOff: "black", // span标签字体颜色
            divColorOff: "black", // div标签字体颜色
            buttonColorOff: "white", // button标签字体颜色
            h3ColorOff: "black", // h3标签字体颜色
            h3BackgroundOff: "rgb(185,211,238)", // h3标签背景颜色
            textareaColorOff: "black", // textarea标签字体颜色
            textareaBackgroundOff: "white", // textarea标签背景颜色
            addColorOff: 'black'
        };
        let data = localStorage.getItem('store')
        if (!isNullOrEmpty(data)) {
            store = JSON.parse(localStorage.getItem('store'));
            // 页面首次加载，会拿到本地的flag
            // 首次加载页面
            if (store.flag) {
                store.flag = true
                localStorage.setItem('store', JSON.stringify(store));
                $("#btn").attr("isopen", "on").animate({
                    left: '38px'
                });
                $(".btnBoxS").removeClass('changeColorOn');
                $(".btnBoxS").addClass('changeColorTurn');
                // 开关为true
                $("body").css({
                    backgroundColor: store.bodyBackgroundColorOn,
                    color: store.bodyColorOn
                });
                $("h1").css({
                    color: store.h1ColorOn
                });
                $("span").css({
                    color: store.spanColorOn
                });
                $("div").css({
                    color: store.divColorOn
                });
                $(".addClass").addClass('addColorOn');
                $("button").css({
                    color: store.buttonColorOn
                });
                $("h3").css({
                    color: store.h3ColorOn,
                    background: store.h3BackgroundOn
                });
                $("textarea").css({
                    color: store.textareaColorOn,
                    background: store.textareaBackgroundOn,
                });
                $(".on").css("display", "inline-block");
                $(".off").css("display", "none");
            } else {
                store.flag = false
                localStorage.setItem('store', JSON.stringify(store));
                $("#btn").attr("isopen", "off").animate({
                    left: "3px"
                });
                $(".btnBoxS").removeClass('changeColorTurn');
                $(".btnBoxS").addClass('changeColorOn');
                // 开关为false
                $("body").css({
                    backgroundColor: store.bodyBackgroundColorOff,
                    color: 'green'
                });
                $("h1").css({
                    color: store.h1ColorOff
                });
                $("span").css({
                    color: store.spanColorOff
                });
                $("div").css({
                    color: store.divColorOff
                });
                $(".addClass").addClass('addColorOff');
                $("textarea").css({
                    color: store.textareaColorOff,
                    background: store.textareaBackgroundOff
                });
                $("h3").css({
                    color: store.h3ColorOff,
                    background: store.h3BackgroundOff
                });
                $("button").css({
                    color: store.buttonColorOff
                });
                $(".on").css("display", "none");
                $(".off").css("display", "inline-block");
            }
        } else {
            store.flag = false
            localStorage.setItem('store', JSON.stringify(store));
            $("#btn").attr("isopen", "off").animate({
                left: "3px"
            });
            $(".btnBoxS").removeClass('changeColorTurn');
            $(".btnBoxS").addClass('changeColorOn');
            // 开关为false
            $("body").css({
                backgroundColor: store.bodyBackgroundColorOff,
                color: 'green'
            });
            $("h1").css({
                color: store.h1ColorOff
            });
            $("span").css({
                color: store.spanColorOff
            });
            $("div").css({
                color: store.divColorOff
            });
            $(".addClass").addClass('addColorOff');
            $("textarea").css({
                color: store.textareaColorOff,
                background: store.textareaBackgroundOff
            });
            $("h3").css({
                color: store.h3ColorOff,
                background: store.h3BackgroundOff
            });
            $("button").css({
                color: store.buttonColorOff
            });
            $(".on").css("display", "none");
            $(".off").css("display", "inline-block");
        }
        // 点击按钮
        $(".contentBoxS").on("click", function () {
            if ($("#btn").attr("isopen") == "off") {
                $("#btn").attr("isopen", "on").animate({
                    left: '38px'
                });
                store.flag = true
                localStorage.setItem('store', JSON.stringify(store));
                // $(".btnBoxS").css("background-color", "#409EFF");
                $(".btnBoxS").removeClass('changeColorOn');
                $(".btnBoxS").addClass('changeColorTurn');
                // 按钮为true
                $("body").css({
                    backgroundColor: store.bodyBackgroundColorOn,
                    color: store.bodyColorOn
                });
                $("h1").css({
                    color: store.h1ColorOn
                });
                $("span").css({
                    color: store.spanColorOn
                });
                $("div").css({
                    color: store.divColorOn
                });
                $(".addClass").addClass('addColorOn');
                $("button").css({
                    color: store.buttonColorOn
                });
                $("h3").css({
                    color: store.h3ColorOn,
                    background: store.h3BackgroundOn
                });
                $("textarea").css({
                    color: store.textareaColorOn,
                    background: store.textareaBackgroundOn,
                });
                $(".on").css("display", "inline-block");
                $(".off").css("display", "none");
            } else if ($("#btn").attr("isopen") == "on") {
                $("#btn").attr("isopen", "off").animate({
                    left: "3px"
                });
                store.flag = false
                localStorage.setItem('store', JSON.stringify(store));
                // $(".btnBoxS").css("background-color", "white");
                $(".btnBoxS").removeClass('changeColorTurn');
                $(".btnBoxS").addClass('changeColorOn');
                // 按钮为false
                $("body").css({
                    backgroundColor: store.bodyBackgroundColorOff,
                    color: store.bodyColorOff

                });
                $("h1").css({
                    color: store.h1ColorOff
                });
                $("span").css({
                    color: store.spanColorOff
                });
                $("div").css({
                    color: store.divColorOff
                });
                $(".addClass").addClass('addColorOff');
                $("textarea").css({
                    color: store.textareaColorOff,
                    background: store.textareaBackgroundOff
                });
                $("h3").css({
                    color: store.h3ColorOff,
                    background: store.h3BackgroundOff
                });
                $("button").css({
                    color: store.buttonColorOff
                });
                $(".on").css("display", "none");
                $(".off").css("display", "inline-block");
            }
        })
    })
</script>
<!--纯白/护眼end-->


</body>
</html>